<template>
  <div class="mine">
    <div class="avatar">
      <el-avatar
        :src="currentAdmin.photo"
        :size="100"
        v-if="currentAdmin.photo"
      />
      <el-avatar :icon="UserFilled" :size="100" v-else />
      <!-- <el-avatar
        :src="AVATAR_IMG_URL + currentAdmin.photo"
      /> -->
    </div>
    <el-descriptions :column="2">
      <el-descriptions-item 
        v-for="(value, key) in descriptionData" 
        :key="key" 
        :label="key + ':'"
      >{{value}}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {useStore} from 'vuex';
import {reactive, toRefs, computed, onBeforeMount} from 'vue';
import { UserFilled } from '@element-plus/icons-vue';
import {AVATAR_IMG_URL} from '../../config/constant';

export default {
  name: 'Mine',
  setup(){
    const $store = useStore();

    //登录用户信息
    const currentAdmin = computed(() => {
      return $store.state.admin.adminInfo;
    });

    //登录用户信息-描述列表
    const descriptionData = computed(() => {
      return $store.getters['admin/createDescription'];
    });

    return {
      AVATAR_IMG_URL,
      currentAdmin,
      UserFilled,
      descriptionData,
    }
  },
}
</script>

<style lang="scss" scoped>
.mine {
  .avatar {
    margin-bottom: 20px;
  }
}
</style>